<template>
    <div id="app">
        <div class="app_deng">
            <div id="zhan"></div>
            <span @click='login' v-if="!usershow">登录</span>
            <nav id="user" v-if="usershow">
                <div><img :src="user.avatar_url" alt=""></div>
                <p>{{user.loginname}}</p>
            </nav>
        </div>
        <div class="navs">
            <nav>
                <div @click='gogo(item)' v-for="item,index in list" :key='index'><van-icon :name="item.icon"/><p>{{item.title}}</p> </div>
            </nav>
        </div>
        <div class="unlogin" v-if="usershow">
            <button @click="unlogin">退出登录</button>
        </div>
    </div>
</template>

<script>
import {Dialog} from 'vant';

export default {
    components: {
        [Dialog.Component.name]: Dialog.Component,
    },
    data(){
        return {
            user:{},
            usershow:false,
            list:[
                {'title':'未读消息','icon':'chat-o',router_name:'info'},
                {'title':'个人信息','icon':'smile-o',router_name:'myuser'},
                {'title':'主题收藏','icon':'star-o',router_name:'collect'},
            ]
        }
    },
    methods:{
        login(){
            this.$router.push({
                name:'deng'
            })
        },
        unlogin(){
            this.user={};
            window.localStorage.clear()
            this.usershow=false
            console.log(window.localStorage.getItem('user'))
        },
        gogo(item){
            if("loginname" in this.user){
                this.$router.push({name:item.router_name})
            }else{
                Dialog.confirm({
                    title: '您还没有登录',
                    message: '是否登录',
                })
                .then(() => {
                    this.$router.push({name:'deng'})
                })
                .catch(() => {
                    console.log('不需要')                    
                })
            }
        }
    },
    created(){
        if(window.localStorage.getItem('user')){
            this.user = JSON.parse(window.localStorage.getItem('user'));
            this.usershow=true
        }else{
            this.usershow=false
            this.user = {}
        }
    }
}
</script>

<style lang="scss" scoped>
#app{
    width:100%;
    height:auto;
    >.navs{
        width:100%;
        height:1rem;
        >nav{
            width:90%;
            margin:0px auto;
            display: flex;
            justify-content: space-around;
            >div{
                padding:.2rem 0px 0px;
                text-align: center;
                width:30%;
                font-size:.3rem;
                >p{
                    margin-top:.08rem;
                    font-size:.12rem;
                    color: #333;
                }
            }
            >div:nth-child(1)>i{color: #7be498;}
            >div:nth-child(2)>i{color: #f2aa68;}
            >div:nth-child(3)>i{color: #0e78d7;}
        }
    }
    >.app_deng{
        width:100%;
        min-height:1.2rem;
        background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
        position: relative;
        >#zhan{
            height:1.2rem;
        }
        >#user{
            width:.6rem;
            height:.8rem;
            margin:0px auto .3rem;
            >div{
                width:.6rem;
                height:.6rem;
                overflow: hidden;
                position: relative;
                >img{
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                }
            }
            >p{
                font-size:.14rem;
                height:.2rem;
                line-height:.3rem;
                color: white;
                text-align: center;
            }
        }
        >a{
            position: absolute;
            font-size: .24rem;
            top:.05rem;
            left: .02;
        }
        >span{
            position: absolute; 
            width: .8rem;
            height:.26rem;
            line-height:.26rem;
            color:#ffff;
            text-align: center; 
            font-size:.14rem;
            border-radius:.2rem;
            background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
            bottom:.2rem;
            left:50%;
            transform: translateX(-50%);
        }
    }
}

.unlogin{
    width:100%;
    box-sizing: border-box;
    padding:0px 5%;
    height:.36rem;
    display: flex;
    >button{
        width:100%;
        height:.36rem;
        background-image: linear-gradient(to right, #c0c0aa , #1cefff );
        color: white;
        font-size: .14rem;
        border:none;
        outline:none;
    }
}
</style>
